<!--
 * @Description  : 书籍分类
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-02-25
-->
<template>
  <AppPage class="bg-[#f4f4f4]" :header-class="'bg-[#f4f4f4]'">
    <template #center>
      <router-link to="search">
        <van-search placeholder="请输入搜索关键词" background="none" readonly shape="round" />
      </router-link>
    </template>
    <van-tabs class="tab1" background="none" shrink z-0 color="#fcd006" :line-width="30">
      <van-tab title="全部" name="全部" />
      <van-tab title="文学艺术" name="文学艺术" />
      <van-tab title="人文历史" name="人文历史" />
      <van-tab title="子女教育" name="子女教育" />
    </van-tabs>
    <!-- v-model:active="activeName" -->
    <van-tabs class="tab2" background="none" mt-20 shrink z-0 :line-height="0">
      <van-tab title="全部" name="全部" />
      <van-tab title="纸质书" name="纸质书" />
      <van-tab title="电子书" name="电子书" />
      <van-tab title="有声版" name="有声版" />
      <van-tab title="博客" name="博客" />
      <van-tab title="课程" name="课程" />
    </van-tabs>
    <p class="text-12 c-[#7b7b7b] mt-20">共{{ total }}条内容</p>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <article v-for="(item, index) in albumList" :key="index" flex items-center mt-10 bg-white p-10 b-rd-5>
        <van-image radius="10" width="88" :src="item.albumImage" />
        <section ml-10>
          <h4>{{ item.albumName }}</h4>
          <div mt-10 flex items-center>
            <div m-r-5 bg-yellow w-5 h-5 b-rounded-50></div>
            <span text-10>{{ item.albumAuthor }}</span>
          </div>
          <p class="text-10 c-[#7b7b7b] mt-10 van-ellipsis w-220">{{ item.albumIntro }}</p>
          <p class="text-10 fw-600 mt-10 c-[#c86071]"><span>￥</span> {{ item.albumPrice }}</p>
        </section>
      </article>
    </van-pull-refresh>
  </AppPage>
</template>

<script setup>
import { showToast } from 'vant'
import { dataList } from '~/mock/mock'
const activeName = ref('全部')
const loading = ref(false)
const route = useRoute()
const albumList = ref([])
activeName.value = route.query.name
for (let index = 0; index < 10; index++) {
  albumList.value.push(dataList)
}
const total = ref(100)
onMounted(() => {
  console.log('3.-组件挂载到页面之后执行-------onMounted')
})

const onRefresh = () => {
  setTimeout(() => {
    showToast('刷新成功')
    loading.value = false
    total.value++
  }, 1000)
}
</script>
<style lang="scss">
.van-tab--shrink {
  padding: 0;
  font-size: 14px;
}
.van-tabs__nav {
  justify-content: space-between;
}
.van-tabs__nav--line.van-tabs__nav--shrink,
.van-tabs__nav--line.van-tabs__nav--complete {
  padding-right: 0;
  padding-left: 0;
}

.tab1 {
  .van-tabs__wrap {
    border-bottom: 1px solid #e8e8e8;
  }
}

.tab2 {
  .van-tabs__nav--line {
    height: 30px;
  }
  .van-tab--active {
    background-color: #e8e8e8;
    border-radius: 20px;
    padding: 10px 10px;
    height: 30px;
  }
}
</style>
